<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>贪吃蛇游戏</title>
    <style>
        #game-board {
            width: 500px;
            height: 500px;
            border: 1px solid black;
            background-color: white;
        }

        .snake {
            width: 20px;
            height: 20px;
            background-color: green;
            position: absolute;
        }

        .food {
            width: 20px;
            height: 20px;
            background-color: red;
            position: absolute;
        }

        #game-over-modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
        }

        #game-over-modal-content {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            text-align: center;
            background-color: white;
            padding: 20px;
        }

        #game-over-modal-content h2 {
            margin-top: 0;
        }

        #game-over-modal-content button {
            margin-top: 10px;
            padding: 5px 10px;
            font-size: 18px;
        }
    </style>
</head>

<body>
    <div id="game-board"></div>
    <div id="game-over-modal">
        <div id="game-over-modal-content">
            <h2></h2>
            <button>重新开始</button>
        </div>
    </div>
</body>
<script src="../index.html"></script>
<script>
    const board = document.getElementById('game-board');
    const width = 25;
    const height = 25;
    const cellSize = 20;
    let snake = [{ x: 12, y: 12 }];
    let food = { x: 0, y: 0 };
    let direction = 'right';
    let gameLoopId = null;

    function drawBoard() {
        board.innerHTML = '';
        for (let y = 0; y < height; y++) {
            const row = document.createElement('div');
            row.className = 'row';
            for (let x = 0; x < width; x++) {
                const cell = document.createElement('div');
                cell.className = 'cell';
                row.appendChild(cell);
            }
            board.appendChild(row);
        }
    }

    function drawSnake() {
        snake.forEach(segment => {
            const snakeCell = document.createElement('div');
            snakeCell.className = 'snake';
            snakeCell.style.left = segment.x * cellSize + 'px';
            snakeCell.style.top = segment.y * cellSize + 'px';
            board.appendChild(snakeCell);
        });
    }

    function drawFood() {
        const foodCell = document.createElement('div');
        foodCell.className = 'food';
        foodCell.style.left = food.x * cellSize + 'px';
        foodCell.style.top = food.y * cellSize + 'px';
        board.appendChild(foodCell);
    }

    function moveSnake() {
        const head = { x: snake[0].x, y: snake[0].y };
        switch (direction) {
            case 'right':
                head.x++;
                break;
            case 'down':
                head.y++;
                break;
            case 'left':
                head.x--;
                break;
            case 'up':
                head.y--;
                break;
        }
        // Check if the head is out of bounds
        if (head.x < 0 || head.x >= width || head.y < 0 || head.y >= height) {
            endGame();
            return;
        }
        snake.unshift(head);
        if (head.x === food.x && head.y === food.y) {
            generateFood();
        } else {
            snake.pop();
        }
    }

    function generateFood() {
        food.x = Math.floor(Math.random() * width);
        food.y = Math.floor(Math.random() * height);
    }

    function changeDirection(event) {
        switch (event.key) {
            case 'ArrowRight':
                if (direction !== 'left') {
                    direction = 'right';
                }
                break;
            case 'ArrowDown':
                if (direction !== 'up') {
                    direction = 'down';
                }
                break;
            case 'ArrowLeft':
                if (direction !== 'right') {
                    direction = 'left';
                }
                break;
            case 'ArrowUp':
                if (direction !== 'down') {
                    direction = 'up';
                }
                break;
        }
    }

    function endGame() {
        clearInterval(gameLoopId);
        const score = snake.length - 1;
        const modal = document.getElementById('game-over-modal');
        const scoreText = modal.querySelector('h2');
        scoreText.textContent = '游戏结束！得分：' + score;
        modal.style.display = 'block';
        const restartButton = modal.querySelector('button');
        restartButton.addEventListener('click', startGame);
    }

    function startGame() {
        drawBoard();
        snake = [{ x: 12, y: 12 }];
        generateFood();
        direction = 'right';
        drawSnake();
        drawFood();
        const modal = document.getElementById('game-over-modal');
        modal.style.display = 'none';
        document.addEventListener('keydown', changeDirection);
        gameLoopId = setInterval(() => {
            moveSnake();
            drawBoard();
            drawSnake();
            drawFood();
        }, 100);
    }

    startGame();

    const modal = document.getElementById('game-over-modal');
    const restartButton = modal.querySelector('button');
    restartButton.addEventListener('click', startGame);

</script>

</html>